<template>
    <section class="mysection">
        <h4 class="search-title bg-color"><i class="el-search-alt"></i>您查询的关键字： <font color="#DC4900">{{keywords}}</font>
        </h4>
        <hr/>
        <div class="arclist">          
            <!--列表开始-->
            <ul>
                <li  v-for='blog in blogs' :key="blog.blogId" :class="isSupport(blog.support)">
                    <div class="arcimg">
                        <img :src="blog.headerImg" alt="博客图片" :title="blog.title"/>
                    </div>
                    <div class="arc-right">
                        <h4 class="blue-text">
                            <router-link :to="{name:'Article',params:{blogId:blog.blogId}}" 
                            :title="blog.title">{{blog.title}}</router-link>                            
                        </h4>
                        <p>{{blog.summary}}</p>
                        <ul>
                            <li>
                                <!-- a标签title提示的设置在showtip.js -->
                                <a href="" :title="'卑微小袁' + blog.createTime + '发表'" >
                                    <i class="el-time"></i>
                                    <span>时间：{{blog.createTime}}</span>
                                </a>
                            </li>
                            <li>
                                <router-link :to="{name:'About'}" title="作者:卑微小袁">
                                    <i class="el-user"></i>卑微小袁
                                </router-link> 
                            </li>
                            <li>
                                <!--留言的数量,并能链接文章详情页(还未完全实现)-->
                                <router-link :to="{name:'Article',params:{blogId:blog.blogId}}" :title="blog.title">
                                    <i class="el-comment"></i>
                                    <span class="cy_cmt_count"></span>
                                </router-link>
                            </li>
                            <li><a :title="'已有' + blog.click + '次浏览'">
                                    <i class="el-eye-open"></i>
                                    <span>已有{{blog.click}}次浏览</span>
                                </a>
                            </li>
                            <li>
                                <!-- 路由跳转传分类id -->
                                <router-link :to="{name:'Blog_By_Category',query:{categoryId:blog.categoryId}}"
                                title="查看分类">
                                    <i class="el-th-list"></i>
                                    <span>{{blog.categoryTitle}}</span>
                                </router-link> 
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!--分页开始-->
        
        <pageByKeywords :blogPageInfo="pageInfo" @someOfPageBlogs="getBlogsByKeywords"></pageByKeywords>
        <!--分页结束-->
        
    </section>
</template>

<script>
//分页组件
import pageByKeywords from './page_by_keywords';
import {titleInit,removeMouseMethod} from '../../../static/front-vue/js/showtip'; //title样式初始化

export default {
    name: 'mainly',
    components: {pageByKeywords},
    data () {
        return {
            blogs: [],      //博客对象集合按关键字
            pageInfo: [],   //博客分页信息对象，使用PageHelper插件            
            keywords:this.$route.query.keywords //查询关键字           
        }
    },
    beforeCreate:function() {
        
    },
    created:function() {        
        //生命周期：在html渲染后执行,初次的路由此vue监听不到，采用钩子函数获取数据
        this.getBlogsByKeywords();  
    },
    //激活时触发
    activated:function() {       
         
    },
    deactivated:function() {
        
    },
    updated:function() {
        //渲染完数据进行title样式的自定义
        removeMouseMethod();
        titleInit();
    },
    watch: {       
        //监听路由
        '$route'(to,from) {
            //只监听到此分类页面的路由请求
            if(to.path == '/blogByKeywords')
                this.getBlogsByKeywords();
            
        }
    },
    
    methods: {            
        //判断是否为推荐的博文
        isSupport (support) {
            if(support == 1)
                return 'tuijian';
            else
                return '';
        },

        //按照关键字获取博客
        getBlogsByKeywords (pageNumUrl) {
            console.log(pageNumUrl);
            var _this = this; 
    
            _this.keywords = _this.$route.query.keywords; 
           if(!pageNumUrl) {
               pageNumUrl = "pageNum=1";
           } 
                        
            //按关键字查询获取博客集合
            var param = pageNumUrl + "&keywords=" + _this.keywords;
            this.$axios.get('/mainPage/aside/searchByKeywords?' + param).then(resp => {
                if (resp && resp.status === 200) {                    
                    _this.blogs = resp.data.list;                    
                    _this.pageInfo = resp.data;                      
                     
                }	
            });          
        }
    }
}
</script>

<style scoped>
    .swiper-container {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
        }

    .swiper-slide {
        position: relative;
    }

    .swiper-slide .content {
        width: 50%;
        max-width: 460px;
        position: absolute;
        right: 60px;
        bottom: 90px;
        z-index: 20;
    }

    @media screen and (max-width: 768px) {
        .swiper-slide .content {
            display: none;
        }
    }

    .swiper-slide .content .txt {
        padding: 20px;
        background: rgba(255, 255, 255, 0.85);
    }

    .swiper-slide .content .txt h3 {
        font-family: "BerlingskeSans Serif", Georgia, Times, serif;
        margin: 0;
        font-size: 2.3em;
        font-weight: normal;
    }

    .swiper-slide .content .txt p {
        margin: 5px 0 0;
        font-size: 1.2em;
    }

    .swiper-slide .content .link {
        border-radius: 25px;
        display: block;
        background: #008369;
        transition: .2s background;
        color: #fff;
        font-family: "BerlingskeSans Bd", Tahoma, helvetica, arial, sans-serif;
        text-align: center;
        font-weight: 400;
        font-size: 1.1em;
        line-height: 1.1em;
        padding: 10px 30px 10px;
        float: right;
        margin-top: 15px;
        text-decoration: none;
    }

    .swiper-slide .content .link:hover {
        background: #006a55;
    }

    .img-fix {
        margin-top: -25%;
        overflow: hidden;
    }

    .img-inner {
        transform: translateY(0%);
    }

    .swiper-container img {
        width: 100%;
        display: block;
    }

    .swiper-button-next, .swiper-button-prev {
        background: none;
        top: auto;
        bottom: 30px;
    }

    .swiper-button-prev {
        left: 0;
    }

    .swiper-button-next {
        right: 40px;
    }

    .swiper-button-next:before, .swiper-button-prev:before {
        font-family: "upsicons";
        position: absolute;
        display: block;
        height: 54px;
        width: 50px;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 54px;
        color: #fff;
        font-size: 68px;
    }

    .swiper-button-prev:before {
        content: '\e628';
    }

    .swiper-button-next:before {
        content: '\e62a';
    }

    .bottom-nav {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 30px;
        z-index: 10;
    }

    .ups-icon-videoplay {
        display: inline-block;
        vertical-align: middle;
        margin-right: 15px;
        cursor: pointer;
    }

    .ups-icon-videoplay:before {
        font-family: "upsicons";
        content: "\e680";
        font-size: 28px;
        color: white;
    }

    .stop-status.ups-icon-videoplay:before {
        content: "\e681";
    }

    .swiper-pagination {
        position: relative;
        display: inline-block;
        height: 29px;
        vertical-align: middle;
    }

    #ups-banner .swiper-pagination-bullet {
        width: 18px;
        height: 18px;
        background: #fff;
        opacity: 1;
        box-sizing: border-box;
        border: 3px solid #fff;
        margin: 0 15px;
        vertical-align: middle;
    }

    #ups-banner .swiper-pagination-bullet-active {
        background: #ffb500;
    }

    @media (max-width: 767px) {
        .swiper-button-prev:before {
            content: '\e627';
        }

        .swiper-button-next:before {
            content: '\e629';
        }

        .swiper-button-next, .swiper-button-prev {
            bottom: 10px;
        }

        .swiper-button-next:before, .swiper-button-prev:before {
            font-size: 32px;
        }

        .bottom-nav {
            bottom: 10px;
        }

        #ups-banner .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            border-width: 2px;
            margin: 0 10px;
        }

        .ups-icon-videoplay {
            margin-right: 10px;
        }
    }
</style>
